<template>
  <div class="projectList-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
      <van-icon name="weapp-nav" slot="right" style="font-size:35px;" />
    </van-nav-bar>
    <div class="c_container" >
      <van-pull-refresh v-model="loading" @refresh="refreshList">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          @load="loadData"
        >
          <div class="lws_card" v-for="item in list" :key="item.id" @click="show_detail(item,'88')">
            <div class="car_title">
              <span>{{item.id}} {{item.projectName}}</span>
              <div class="tap">{{item.status}}</div>
            </div>
            <div class="car_container">
              <van-cell-group>
                <van-cell title="工程地址" :value="item.address" />
                <van-cell title="联系人" :value="item.person" />
                <van-cell title="联系方式" :value="item.phone" />
                <van-cell title="计划开始时间" :value="item.start_time" />
                <van-cell title="计划结束时间" :value="item.end_time" />
              </van-cell-group>
            </div>
            <div class="car_sub">
              <span>{{item.company}}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
export default {
  name: "projectList",
  data() {
    return {
      componentName: "质量监督登记",
      loading: false,
      finished: false,
      list: [],
      itemTemplat:{
          id: 0,
          projectName:'云星.创客园',
          status:'未申报',
          address:'安吉大道65-1号',
          company:'广西五羊地产开发有限公司',
          person:'张三，李四',
          phone:'12312321231',
          start_time:'2018-07-11 16时',
          end_time:'2019-07-11 16时'
      },
      test:0
    };
  },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    show_detail(pid, tid) {
      this.$router.push({
        name: "bj_projectInfo",
        params: {
          pid: pid,
          tid: tid
        }
      });
    },
    loadData() {
      console.log('load');
      
      let cont = this.list.length
      for (let idx = 0; idx < 5; idx++) {
        let item = eval('('+JSON.stringify(this.itemTemplat)+')');
        item.id = cont+idx
        this.list.push(item);
      }
      this.loading = false;
      if (this.list.length >= 25) this.finished = true;
    },
    refreshList() {
      this.list = []
      setTimeout(()=>{
      for (let idx = 0; idx < 10; idx++) {
        let item = eval('('+JSON.stringify(this.itemTemplat)+')');
        item.id  = idx
        this.list.push(item);
      }
      this.loading = false;
      },300)
    },
    MoveTop(scrollTop){
      //由于transition标签的渐进会锁住dom导致无法马上更新scrollTop
      //延时长与动画效果有关只能逐个测试
        setTimeout(()=>{
          const $contain = document.querySelector('.c_container');
          $contain.scrollTop = scrollTop;
        },350)
    }
  },
  activated(){
    //keepalive回归后激活事件，保证列表在正确的位置
    const scrollTop = this.$route.meta.scrollTop;
    if(scrollTop)
    this.MoveTop(scrollTop)
  },
};
</script>
<style lang="scss" scoped>
.projectList-comp-ct {
  .cfs {
    font-weight: bold;
  }
  .lws_card {
    margin: 5% 5%;
    width: 90%;
    // border: 1px solid;
    -webkit-box-shadow: 2px 2px 5px #474646;
    box-shadow: 2px 2px 5px #474646;
    .car_title {
      line-height: 35px;
      border-bottom: 1px dashed;
      border-color: #929292;
      text-align: left;
      padding-left: 15px;
      font-weight: bold;
      .tap {
        background-color: #e72323;
        width: 90px;
        line-height: 25px;
        float: right;
        margin-right: 15px;
        text-align: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: #fff;
      }
    }
    .car_container {
      line-height: 30px;
      .van-cell {
        padding: 5px 10px;
        line-height: 1.1rem;
        .van-cell__title {
          text-align: left;
        }
        .van-cell__value {
          flex: 2;
          text-align: left;
        }
      }
    }
    .car_sub {
      line-height: 35px;
      border-top: 1px dashed;
      border-color: #929292;
      text-align: right;
      padding-right: 15px;
      color: rgb(37, 112, 233);
    }
  }
}
</style>
